<template>
  <main-card :title="`审核详情（${appInfo.name || ''})`" :crumbs="crumbs" :loading="loading" :screen-style-obj="computedScreenStyleObj">
    <div class="details-content">
      <audit-result :app-info="appInfo" />
      <information-form
        :audit-app-api="appInfo.auditAppApiVOList"
        :audit-app-sdk="appInfo.auditAppSdkVOList"
        @getClientInfo="getClientInfo()"
      />
    </div>
  </main-card>
</template>

<script lang="ts" setup>
  import { computed, ref } from 'vue'
  import { useRequest } from 'vue-request'
  import { useRoute } from 'vue-router'

  import { auditListApi } from '@/services/api'

  import AuditResult from '../components/AuditResult.vue'
  import InformationForm from '../components/InformationForm.vue'
  import { AuditDetails } from '../types/index'

  const route = useRoute()

  const { id } = route.params as { id: string }
  const crumbs = computed(() => {
    return [{ path: '/ai-app/check-log/list', name: `审核记录` }, { name: `审核详情（${appInfo.value.name || ''})` }]
  })
  const computedScreenStyleObj = computed(() => {
    return {
      padding: '0 32px 0 32px'
    }
  })
  const appInfo = ref<AuditDetails>({})

  const { loading, runAsync: getClientInfo } = useRequest<ResponseData<AuditDetails>>(auditListApi.appDetail(id), {
    onSuccess: res => {
      const { data } = res
      Object.assign(appInfo.value, data)
    },
    onError: () => {}
  })
</script>
<style lang="less" scoped>
  .details-content {
    position: relative;
    display: flex;
    margin: 0 auto;
    margin-top: 32px;
    width: 824px;
    // background: #fff;
    border-radius: 6px;
    flex-direction: column;
    gap: 12px;
  }
</style>
